<template>
  <div id="left_nav" @click="history">
    <div>
      <!-- <logo v-show="!isCollapse" class="pointer logo" :show="true" /> -->
      <img
        src="@/assets/shi/logo-1.png"
        alt
        class="logoImg"
        v-show="!isCollapse"
        @click="$router.push('/')"
      />
      <!-- 之前的logo -->
      <!-- <logo v-show="!isCollapse" class="pointer logo" :show="true" /> -->
      <!-- :default-active="'/talent_main/' + $route.params.model" -->
      <!-- :default-active="onRoutes" -->
      <el-menu
        :default-active="'/talent_main/' + $route.params.model"
        router
        :collapse-transition="false"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        active-text-color="#42baff"
        text-color="#000"
        @close="close"
        @open="open"
        @select="select"
      >
        <el-menu-item index="/talent_main/workbench" class="l_h">
          <img src="../assets/meng/left_nav01.png" class="img01" />
          <span slot="title" class="nav_text">工作台</span>
        </el-menu-item>
        <!--  -->

        <!--  -->
        <el-submenu index="1">
          <template slot="title">
            <div
              class="sele"
              v-if="$route.params.model == 'liveDetailsRoot' || clo1"
            >
              <p class="livingGif">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
              </p>
              <span slot="title" class="nav_text">直播分析</span>
            </div>
            <!-- <img src="../assets/meng/left_nav03.png" class="img01" /> -->
            <div v-else>
              <p class="livingGif">
                <span class="span"></span>
                <span class="span"></span>
                <span class="span"></span>
                <span class="span"></span>
              </p>
              <span slot="title" class="nav_text">直播分析</span>
            </div>
          </template>
          <el-menu-item index="/talent_main/liveTrafficMarket"
            >实时数据大盘</el-menu-item
          >
          <!-- <el-menu-item index="/talent_main/live_house">TOP直播间</el-menu-item> -->
          <el-menu-item index="/talent_main/live_house"
            >直播预告看板</el-menu-item
          >
          <el-menu-item index="/talent_main/bring_goods"
            >实时直播大厅</el-menu-item
          >
          <el-menu-item index="/talent_main/liveGoodsRank"
            >直播间带货榜</el-menu-item
          >
          <el-menu-item index="/talent_main/windmill">直播风车榜</el-menu-item>
          <el-menu-item index="/talent_main/explosiveProRoot"
            >直播爆品榜</el-menu-item
          >
          <el-menu-item index="/talent_main/liveDrainage"
            >直播引流榜</el-menu-item
          >
          <el-menu-item index="/talent_main/live_talent"
            >直播达人榜</el-menu-item
          >
          <el-menu-item index="/talent_main/liveSearchRoot"
            >直播搜索</el-menu-item
          >
          <el-menu-item index="/talent_main/liveBroadcasting"
            >直播间对比</el-menu-item
          >
          <!-- <el-menu-item
            index="/talent_main/liveSearchRoot"
            :class="{ 'is-active': $route.params.model == 'liveSearchRes' }"
          >直播搜索</el-menu-item>
          <el-menu-item
            index="/talent_main/liveBroadcasting"
            :class="{ 'is-active': $route.params.model == 'liveBroadcasting' }"
          >直播间对比</el-menu-item>-->
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <div
              :class="
                $route.params.model == 'shop_main' ||
                $route.params.model == 'shop_details' ||
                $route.params.model == 'shopDetails' ||
                clo
                  ? 'sele'
                  : ''
              "
            >
              <img
                v-if="
                  $route.params.model == 'shop_main' ||
                  $route.params.model == 'shop_details' ||
                  $route.params.model == 'shopDetails' ||
                  clo
                "
                src="../assets/liu/left_nav03.png"
                class="img01"
              />
              <img v-else src="../assets/meng/left_nav03.png" class="img01" />
              <span slot="title" class="nav_text">商品分析</span>
            </div>
          </template>
          <!-- <template>
          <div class="bg">-->
          <el-menu-item index="/talent_main/goodsListRoot">商品榜</el-menu-item>
          <el-menu-item index="/talent_main/videoListRoot"
            >带货视频榜</el-menu-item
          >
          <!-- <el-menu-item index="/talent_main/talentSalesList">达人销量榜</el-menu-item> -->
          <el-menu-item index="/talent_main/shopList"
            >抖音小店排行榜</el-menu-item
          >
          <el-menu-item index="/talent_main/searchRoot">商品搜索</el-menu-item>
          <!-- </div> -->
          <!-- </template> -->
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <div
              :class="$route.params.model == 'tdetails' || clo2 ? 'sele' : ''"
            >
              <img
                v-if="$route.params.model == 'tdetails' || clo2"
                src="../assets/liu/left_nav02.png"
                class="img01"
              />
              <img v-else src="../assets/meng/left_nav02.png" class="img01" />
              <span slot="title" class="nav_text"
                >达人分析&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
              >
            </div>
          </template>
          <!-- <el-menu-item index="/talent_main/fans_main">粉丝榜</el-menu-item> -->
          <el-menu-item index="/talent_main/fans_main">达人排行榜</el-menu-item>
          <el-menu-item index="/talent_main/star_map">星图达人榜</el-menu-item>
          <el-menu-item index="/talent_main/search">达人搜索</el-menu-item>
          <el-menu-item
            index="/talent_main/compare"
            :class="{
              'is-active':
                $route.params.model == 'history' ||
                $route.params.model == 'compareDetails',
            }"
            >达人对比</el-menu-item
          >
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <div
              :class="
                $route.params.model == 'cs' ||
                $route.params.model == 'videoDetails' ||
                $route.params.model == 'musicDetails' ||
                $route.params.model == 'topicDetailsMainL' ||
                clo3
                  ? 'sele'
                  : ''
              "
            >
              <img
                v-if="
                  $route.params.model == 'cs' ||
                  $route.params.model == 'videoDetails' ||
                  $route.params.model == 'musicDetails' ||
                  $route.params.model == 'topicDetailsMainL' ||
                  clo3
                "
                src="../assets/liu/left_nav09.png"
                class="img01"
              />
              <img v-else src="../assets/meng/left_nav09.png" class="img01" />
              <span slot="title" class="nav_text">短视频分析</span>
            </div>
          </template>
          <el-menu-item index="/talent_main/hot_video">热门视频</el-menu-item>
          <el-menu-item index="/talent_main/hotMusic">热门音乐</el-menu-item>
          <el-menu-item index="/talent_main/hotTopic">热门话题</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <div
              :class="$route.params.model == 'brandRoot' || clo4 ? 'sele' : ''"
            >
              <img
                v-if="$route.params.model == 'brandRoot' || clo4"
                src="../assets/liu/BrandList.png"
                class="img01"
              />
              <img v-else src="../assets/li/BrandList.png" class="img01" />
              <span slot="title" class="nav_text">品牌分析</span>
            </div>
          </template>
          <el-menu-item index="/talent_main/list">抖音品牌榜</el-menu-item>
        </el-submenu>
        <!-- <el-submenu index="06">
          <template slot="title">
            <div :class="clo04 ? 'sele' : ''">
              <img
                v-if="clo04"
                src="../assets/liu/selmonitor.png"
                class="img01"
              />
              <img v-else src="../assets/liu/monitor.png" class="img01" />
              <span slot="title" class="nav_text">数据监测</span>
            </div>
          </template>
          <el-menu-item index="/talent_main/liveMonitor">直播监测</el-menu-item>
          <el-menu-item index="/talent_main/accountMonitor">账号监测</el-menu-item>
        </el-submenu>-->
        <el-submenu index="7">
          <template slot="title">
            <div>
              <!-- <img v-if="$route.params.model == 'brandRoot' || clo44"
                   src="../assets/liu/zn2.png"
              class="img01" />-->
              <img src="../assets/liu/zn1.png" class="img01" />
              <!-- <img v-else
                   src="../assets/liu/zn1.png"
              class="img01" />-->
              <span slot="title" class="nav_text">智能分析</span>
              <i class="nav_new"></i>
            </div>
          </template>
          <el-menu-item index="/inAnalysis/talentLibrary"
            >达人资源库</el-menu-item
          >
          <!-- <el-menu-item index="/inAnalysis/findTalent">智能找达人</el-menu-item> -->
          <!-- <el-menu-item index="/inAnalysis/three">智能找商品</el-menu-item> -->
          <el-menu-item index="/inAnalysis/diagnosisIndex"
            >账号诊断</el-menu-item
          >
        </el-submenu>
        <el-menu-item index="/talent_main/buy" class="l_h">
          <img src="../assets/meng/left_nav06.png" class="img01 buy" />
          <span slot="title" class="nav_text">购买续费</span>
        </el-menu-item>
        <!-- <el-menu-item index="/talent_main/person_center" class="l_h">
          <img src="../assets/meng/left_nav07.png" class="img01" />
          <span slot="title" class="nav_text">个人中心</span>
        </el-menu-item>-->
        <el-submenu index="06">
          <template slot="title">
            <div :class="clo04 ? 'sele' : ''">
              <img
                v-if="clo04"
                src="../assets/liu/left_nav07.png"
                class="img01"
              />
              <img v-else src="../assets/meng/left_nav07.png" class="img01" />
              <span slot="title" class="nav_text">个人中心</span>
            </div>
          </template>
          <el-menu-item index="/talent_main/person_center"
            >个人资料</el-menu-item
          >
          <el-menu-item index="/talent_main/myMonitoring"
            >我的监测</el-menu-item
          >
          <el-menu-item index="/talent_main/collectionRoot"
            >我的收藏</el-menu-item
          >
          <el-menu-item index="/talent_main/sendMembers"
            >邀好友送会员</el-menu-item
          >
        </el-submenu>
        <!-- <el-menu-item index="/talent_main/collectionRoot" class="l_h">
          <img src="../assets/meng/left_nav05.png" class="img01" />
          <span slot="title" class="nav_text">我的收藏</span>
        </el-menu-item>-->
      </el-menu>
    </div>

    <section class="img02" @click="left_nav_flag()">
      <i class="el-icon-arrow-left" v-if="!isCollapse"></i>
      <i class="el-icon-arrow-right" v-else></i>
    </section>
  </div>
</template>

<script>
import logo from "@/component/logo.vue";
export default {
  name: "left_nav",
  components: { logo },
  data() {
    return {
      isCollapse: false,
      clo: false,
      clo1: false,
      clo2: false,
      clo3: false,
      clo4: false,
      clo44: false,
      clo04: false,
      left_nav_data: "",
    };
  },
  created() {
    if (
      this.$route.params.model == "shop_main" ||
      this.$route.params.model == "tdetails" ||
      this.$route.params.model == "shop_details" ||
      this.$route.params.model == "shop_details" ||
      this.$route.params.model == "shopDetails" ||
      this.$route.params.model == "liveDetailsRoot" ||
      this.$route.params.model == "brandRoot" ||
      this.$route.params.model == "brandRoot" ||
      this.$route.params.model == "videoDetails" ||
      this.$route.params.model == "musicDetails" ||
      this.$route.params.model == "topicDetailsMainL"
    ) {
      this.$store.commit("change_left_nav_flag", {
        flag: true,
      });

      this.isCollapse = true;
    }
  },
  mounted() {},
  watch: {
    onRoutes(newvalue) {
      this.clo = false;
      this.clo1 = false;
      this.clo2 = false;
      this.clo3 = false;
      this.clo4 = false;
      this.clo44 = false;
      this.clo04 = false;
    },
  },
  computed: {
    onRoutes() {
      return this.$route.params.model;
    },
  },
  methods: {
    left_nav_flag() {
      this.isCollapse = !this.isCollapse;
      this.left_nav_data = !this.$store.state.left_nav_flag;
      this.$store.commit("change_left_nav_flag", {
        flag: this.left_nav_data,
      });
    },
    history() {
      this.$store.commit("reachHistory", false);
    },
    select() {
      this.$store.commit("change_left_nav_flag", {
        flag: false,
      });
      this.isCollapse = false;
    },
    open() {
      this.clo = false;
      this.clo1 = false;
      this.clo2 = false;
      this.clo3 = false;
      this.clo4 = false;
      this.clo44 = false;
      this.clo04 = false;
    },
    close() {
      // console.log( this.$route.params.model=='goodsListRoot'||this.$route.params.model=='videoListRoot'||this.$route.params.model=='talentSalesList'||this.$route.params.model=='shopList'||this.$route.params.model=='searchRoot');
      if (
        this.$route.params.model == "goodsListRoot" ||
        this.$route.params.model == "videoListRoot" ||
        this.$route.params.model == "talentSalesList" ||
        this.$route.params.model == "shopList" ||
        this.$route.params.model == "searchRoot"
      ) {
        this.clo = true;
      } else {
        this.clo = false;
      }
      if (
        this.$route.params.model == "liveTrafficMarket" ||
        this.$route.params.model == "live_house" ||
        this.$route.params.model == "bring_goods" ||
        this.$route.params.model == "explosiveProRoot" ||
        this.$route.params.model == "live_talent" ||
        this.$route.params.model == "liveDrainage" ||
        this.$route.params.model == "liveSearchRoot"
      ) {
        this.clo1 = true;
      } else {
        this.clo1 = false;
      }
      if (
        this.$route.params.model == "fans_main" ||
        this.$route.params.model == "star_map" ||
        this.$route.params.model == "search" ||
        this.$route.params.model == "compare"
      ) {
        this.clo2 = true;
      } else {
        this.clo2 = false;
      }
      if (
        this.$route.params.model == "hot_video" ||
        this.$route.params.model == "hotMusic" ||
        this.$route.params.model == "hotTopic"
      ) {
        this.clo3 = true;
      } else {
        this.clo3 = false;
      }
      if (this.$route.params.model == "list") {
        this.clo4 = true;
      } else {
        this.clo4 = false;
      }
      if (
        this.$route.params.model == "person_center" ||
        this.$route.params.model == "myMonitoring" ||
        this.$route.params.model == "collectionRoot"
      ) {
        this.clo04 = true;
      } else {
        this.clo04 = false;
      }
    },
  },
};
</script>
<style scoped lang="less">
.buy {
  // width: 18px !important;
  height: 15px !important;
}
.livingGif {
  // margin-right: 11px;
  width: 16px;
  transform: scale(1.3);
  margin-top: -2px;
  > span {
    visibility: visible !important;
    background-color: #fd7f2c;
    // background-image: linear-gradient(#ff295d, #fa4fa2) !important;
  }
}
.img02 {
  transition: all 0.3s;
  position: absolute;
  right: -16px;
  top: 0;
  z-index: 20;
  cursor: pointer;
  width: 16px;
  height: 61px;
  background-color: rgba(5, 18, 22, 0.12);
  text-align: center;
  font-size: 14px;
  i {
    color: #000;
    line-height: 56px;
    font-weight: 600;
  }
}
.img01 {
  width: 16px;
  height: 16px;
  // margin-right: 14px;
}
.nav_text {
  margin-left: 14px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  max-width: 188px;
}

.logo {
  transform: scale(0.8);
  margin-top: 20px;
  margin-bottom: 40px;
}
#left_nav {
  > div {
    overflow-y: auto;
    height: 100%;
  }
  > div::-webkit-scrollbar {
    display: none;
  }
  position: fixed;
  left: 0;
  top: 0;
  box-sizing: border-box;
  padding-bottom: 50px;
  height: 100vh;
  z-index: 9999;
  background-color: #05122a;
}
.logoImg {
  display: block;
  width: 95px;
  height: 34px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 40px;
  cursor: pointer;
}
.nav_new {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: -2px;
  margin-bottom: -1px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("../assets/meng/nav_new.png");
  vertical-align: middle;
  animation: navNewAni 2800ms linear infinite;
  @keyframes navNewAni {
    0% {
      transform: translateY(0px);
    }
    10% {
      transform: translateY(-2px);
    }
    20% {
      transform: translateY(0px);
    }
    30% {
      transform: translateY(-2px);
    }
    40%,
    100% {
      transform: translateY(0px);
    }
  }
}
.el-menu--collapse > .el-menu-item .nav_text,
.el-menu--collapse > .el-submenu > .el-submenu__title .nav_text {
  display: none;
}
</style>
